<template>
  <div>
    <el-dialog
      :title="title"
      width="652px"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="企业名称" prop="appCode">
          <el-select v-model="form.appCode" @change="changeSource">
            <el-option
              v-for="(item, index) in sourceList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择产品" prop="productCode">
          <el-select v-model="form.productCode">
            <el-option
              v-for="(item, index) in productList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对账文件" prop="fileUrl">
          <div>
            <FileUpload
              :showButton="true"
              :isFile="true"
              btnText="上传文件"
              accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xls,.xlsx"
              @uploadSuccess="uploadSuccess"
            ></FileUpload>
            <div v-if="form.fileName">{{ form.fileName }}</div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn" @click="submit()">{{ btnText }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload/index.vue'

export default {
  name: 'ImportPop',
  components: {
    FileUpload,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: '导入模版',
      btnText: '确定',
      rules: {
        appCode: [{ required: true, message: '请选择项目' }],
        productCode: [{ required: true, message: '请选择产品' }],
        fileUrl: [{ required: true, message: '请选择上传文件' }],
      },
      form: {
        appCode: '',
        productCode: '',
        fileUrl: '',
        fileName: '',
      },
      sourceList: [],
      productList: [],
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      },
    },
  },
  methods: {
    changeSource(val) {
      this.getProductRequest(val)
    },
    uploadSuccess(res, file) {
      this.form.fileUrl = res.data
      this.form.fileName = file.name
      this.$refs.form.validateField('fileUrl')
    },
    submit() {
      this.$refs['form'].validate(async valid => {
        if (!valid) return
        await this.saveRequest()
      })
    },
    async saveRequest() {
      const res = await this.$http.post('/repayment/upload', this.form)
      if (res) {
        this.$message.success(res)
        this.isShow = false
      }
    },
    async getSourceRequest() {
      const res = await this.$http.get('/app/list')
      this.sourceList = res || []
    },
    async getProductRequest(appCodes) {
      const res = await this.$http.get('/products/list', {
        params: {
          appCodes: appCodes.toString(),
        },
      })
      this.productList = res
    },
  },
  mounted() {
    this.getSourceRequest()
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-input {
    width: 400px;
  }
  .el-input__inner {
    width: 400px;
  }
  .el-textarea {
    width: 400px;
  }
}
.btn {
  width: 400px;
}
</style>
